<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增用户')" />
</head>
<body>

<div id="app_layer" v-cloak >
    <div class="main" v-loading="loading">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-input type="hidden" v-model="form.id"></el-input>
            <el-form-item prop="role_name" label="角色名称：">
                <el-input v-model="form.role_name" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="描述：">
                <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item label="权限：">

                <el-checkbox-group v-model="form.menu_id_array">
                    <div v-for="(item,index) in nav_list" :key="index">
                        <p><el-checkbox :label="item.id">{{item.menu_name}}</el-checkbox></p>
                        <el-checkbox v-for="(s,i) in item.list" :key="i" :label="s.id">{{s.menu_name}}</el-checkbox>
                        <el-divider></el-divider>
                    </div>
                </el-checkbox-group>

            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="onSubmit('form')">点击提交</el-button>
            </el-form-item>
        </el-form>
    </div>

</div>

<script>
    new Vue({
        el: '#app_layer',
        data(){
            return {
                loading:false,
                rules:{
                    role_name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                    ],
                },
                nav_list:[(${menu_list})],
                form:[(${role})],
            }
        },
        methods: {
            onSubmit(formName) {
                let that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        axios.post('/system/save_role',this.form).then(function (res){
                            that.loading = false;
                            let data = res.data;
                            if(data.code==false){
                                parent.vm.add_res(data.msg,'error');
                            }else{
                                parent.vm.add_res(data.msg,'success');
                                parent.drawer_layer_close();
                            }
                        }).catch(function(error){
                            that.loading = false;
                            console.log(error);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
        created () {

        },
    })
</script>

</body>
</html>